import { View, Button } from '@tarojs/components';
import s from './index.module.scss'
import { useState } from 'react';
import classNames from 'classnames';
import Card from 'components/CodeCard'
import code from './code.md'

export default function Index() {
  const [active, setActive] = useState(false)

  const __box = classNames(s.box, {
    [s.active]: active
  })
  return(
    <Card
      title='3d box'
      desc='通过动画演示 3d 方块制作原理'
      renderCode={() => (
        <wemark md={code} link highlight type='wemark' />
      )}
    >
      <Button
        onClick={() => setActive(!active)}
        size='mini'
        type='primary'
      >合成</Button>
      <View className={s.camera}>
        <View className={s.space}>
          <View className={__box}>
            <View className={`${s.side1} ${s.side}`}>1</View>
            <View className={`${s.side2} ${s.side}`}>2</View>
            <View className={`${s.side3} ${s.side}`}>3</View>
            <View className={`${s.side4} ${s.side}`}>4</View>
            <View className={`${s.side5} ${s.side}`}>5</View>
            <View className={`${s.side6} ${s.side}`}>6</View>
          </View>
        </View>
      </View>
    </Card>
  )
}